vue
<template>
  <el-tabs
    v-model="activeTab"
    type="card"
    closable
    class="demo-tabs"
    @tab-remove="handleTabRemove"
    @tab-change="handleTabChange"
  >
    <el-tab-pane v-for="item in tabList" :key="item.path" :label="item.title" :name="item.path">
      <router-view />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router'
import useRoutesStore from '@/stores/routes'
import { storeToRefs } from 'pinia'
import router from '@/router'
const routesStore = useRoutesStore()
const { tabList, activeTab } = storeToRefs(routesStore)

const handleTabChange = (path: any) => {
  console.log('handleTabChange------ ' + path)
  //修改cativeTab
  routesStore.setActiveTab(path)
  router.push('/' + path)
}
const handleTabRemove = (path: any) => {
  console.log('handleTabRemove+++++ ', path)

  console.log(' activeTab ', activeTab.value)

  //移除的是否是当前激活的tab
  if (path == activeTab.value) {
    console.log(' tabList.value[0] ', tabList.value[0].path)
    routesStore.setActiveTab(tabList.value[0].path)
    router.push('/' + tabList.value[0].path)
  }

  routesStore.delTabList(path)
}
</script>

<style lang="scss" scoped></style>
